<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
</head>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" for="searchClubType">社团类型</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="searchClubType" name="typeName" autocomplete="off"
                               placeholder="请输入社团类型">
                    </div>
                    <label class="layui-form-label" for="searchClubName">社团名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="searchClubName" name="clubName" autocomplete="off"
                               placeholder="请输入社团名称">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="searchBtn"
                                id="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="resetBtn">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
            <script type="text/html" id="tableBar">
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">
                    <i class="layui-icon layui-icon-add-1">添加</i>
                </button>
            </script>
            <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="toolbar">
                <button class="layui-btn layui-btn-xs layui-btn-text" lay-event="edit">
                    <i class="layui-icon layui-icon-edit">修改</i>
                </button>
                <button class="layui-btn layui-btn-xs layui-btn-text" lay-event="delete">
                    <i class="layui-icon layui-icon-edit">删除</i>
                </button>
            </script>
        </div>
    </div>
</div>
<div class="layui-form" style="display: none" id="dataForm" lay-filter="dataForm">
    <div class="layui-form-item">
        <input name="clubId" type="hidden">
        <input name="typeId" type="hidden">
        <input name="avatar" type="hidden">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="clubType">社团类型</label>
        <div class="layui-input-block">
            <select class="layui-select" id="clubType" name="typeId" lay-verify="select" lay-search
                    lay-filter="clubType" value=""></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required" for="clubName">社团名称</label>
        <div class="layui-input-block">
            <input class="layui-input" id="clubName" name="clubName" autocomplete="off" placeholder="请输入社团名称"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" for="introduce">社团描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" id="introduce" name="introduce" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">社团头像</label>
        <div class="layui-input-block">
            <button class="layui-btn" id="uploadBtn" name="avatar">点击上传</button>
        </div>
    </div>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px">
        预览图：
        <div class="layui-upload-list" id="bannerList"></div>
    </blockquote>
    <div class="layui-form-item layui-hide">
        <button lay-submit lay-filter="saveBtn" id="saveBtn"></button>
        <button lay-submit lay-filter="updateBtn" id="updateBtn"></button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(["table", "form","upload"], () => {
        const table = layui.table, form = layui.form, $ = layui.$;
        const upload = layui.upload;

        let typeOptions = []
        const renderTypeSelector = (id) => {
            $("#clubType").empty().append(new Option("请选择类型", ""));
            $.ajax({
                url: ctx + "club_type/type/getTypeList",
                method: "get",
                success: ({data}) => {
                    typeOptions = data;
                    data.forEach(g => {
                        $("#clubType").append(new Option(g.typeName, g.typeId,false,g.typeId === id));

                    })
                    form.render("select");
                }
            })
        }

        const detailAvatar = (url) => {
            $("#bannerList").empty()
            $("#bannerList").append(`<img src="` + url + `" alt="" class="layui-upload-img" width="200px" height="200px"/>`)
        }

        const cols = [[
            {type: "numbers"},
            {title: "社团类型", field: "typeName"},
            {title: "社团名称", field: "clubName"},
            {title: "社团头像", field: "avatar"},
            {title: "社团简介", field: "introduce"},
            {title: "创建时间", field: "createTime"},
            {title: "修改时间", field: "updateTime"},
            {title: "操作栏", toolbar: "#toolbar", fixed: "right"}
        ]];

        const dataTable = table.render({
            elem: "#dataTable",
            height: "700px",
            toolbar: "#tableBar",
            id: "dataTable",
            page: {
                limit: 20
            },
            url: ctx + "club/club/list",
            parseData: ({code, data, msg}) => {
                const {records, total} = data;
                return {
                    "code": code,
                    "msg": msg,
                    "count": total,
                    "data": records
                }
            },
            cols: cols
        });

        form.on("submit(searchBtn)", data => {
            dataTable.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            })
        })

        form.on("submit(resetBtn)", data => {
            form.val("searchForm", {
                typeName: "",
                clubName: ""
            })
            $("#searchBtn").click();
        })

        table.on("toolbar(dataTable)", ({event}) => {
            switch (event) {
                case "add":
                    form.val("dataForm", {
                        typeId: "",
                        clubName: "",
                        avatar: "",
                        introduce: ""
                    })
                    $("#bannerList").empty();
                    renderTypeSelector();
                    openDataForm(() => {
                        $("#saveBtn").click();
                    })
                    break;
                default:
                    return false;
            }
        })

        table.on("tool(dataTable)", (obj) => {
            const {event, data, tr} = obj;
            switch (event) {
                case "edit":
                    renderTypeSelector(data.typeId);
                    form.val("dataForm",data);
                    detailAvatar(data.avatar);
                    openDataForm(() => {
                        $("#updateBtn").click();
                    })
                    break;
                case "delete":
                    layer.confirm("确定移除该推荐的社团|协会吗？", () => {
                        $.ajax({
                            url: ctx + "club/club/" + data.clubId,
                            method: "delete",
                            success: ({code, msg}) => {
                                if (code !== 0) {
                                    return layer.msg(msg, {icon: 5})
                                }
                                dataTable.reload();
                                layer.closeAll();
                            }
                        })
                    })
                default:
                    return false;
            }
        })

        const openDataForm = resolve => {
            layer.open({
                type: 1,
                content: $("#dataForm"),
                area: ["700px", "700px"],
                btn: ["确定", "取消"],
                btnAlign: "c",
                yes: resolve
            })
        }

        upload.render({
            elem: "#uploadBtn",
            url: ctx + "club/club/upload",
            multiple: false,
            accept: "images",
            acceptMime: "image/*",
            before: obj => {
                obj.preview((index, file, result) => {
                    $("#bannerList").empty();
                    $("#bannerList").append(`<img src="` + result + `" alt="" class="layui-upload-img" width="200px" height="200px"/>`)
                })
            },
            done: ({code, data, msg}) => {
                if (code !== 0) {
                    return layer.msg(msg, {icon: 5})
                }
                form.val('dataForm',{
                    avatar:msg
                })
                return msg;

            },
            error: () => {

            }
        })

        form.on("submit(saveBtn)", data => {
            saveOrUpdate("save", data);
        })

        form.on("submit(updateBtn)", data => {
            saveOrUpdate("update", data);
        })

        const saveOrUpdate = (event, data) => {
            const url = event === "save" ? "club/club/save" : "club/club/update?clubId=" + data.field.clubId
            $.ajax({
                url: ctx + url,
                method: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(data.field),
                success: ({code, msg}) => {
                    if (code !== 0) {
                        return layer.msg(msg, {icon: 5})
                    }
                    dataTable.reload();
                    layer.closeAll();
                }
            })
        }
    });
</script>
</body>
</html>